<template>
  <!-- 头部信息 -->
  <HeaderView title="个人中心" :hasBack='false' path=""/>

  <!-- 用户信息 -->
  <div class="content">
    <div class="contentLeft">
       <img :src="state.img"/>
    </div>
    <div class="contentRight">
        <p>昵称: {{state.name}}</p>
        <p>账号: {{state.email}}</p>
        <p>个性签名: 我一定会有钱, 让爸妈过的好</p>
    </div>
  </div>

  <div class="list">
    <van-cell-group>
       <van-cell title="我的收藏" isLink to='/collect' />
       <van-cell title="我的订单" isLink/>
       <van-cell title="账号管理" isLink/>
       <van-cell title="地址管理" isLink to='/address'/>
       <van-cell title="关于我们" isLink/>
    </van-cell-group>
  </div>

  <div class="btn">
    <van-button type="success" block round @click="userLogout">退出</van-button>
  </div>

  <!-- 底部tabbar -->
  <BottomView/>

  <!-- 时间超时 -->
  <TimeOutView v-if="timeFlag"/>
</template>

<script lang="ts" setup>
import HeaderView from '@/components/Header/IndexView.vue'
import BottomView from '@/components/Bottom/IndexView.vue'
import TimeOutView from '@/components/TimeOut/IndexView.vue'

import { onMounted, reactive, ref } from 'vue'
import { GetUser, UserLogout } from '@/api/mine'
import { showToast } from 'vant'
import { UserToken } from '@/pinia/index'
import { useRouter } from 'vue-router'

const router = useRouter()
const { saveToken } = UserToken()
const timeFlag = ref(false) // 请求超时 显示界面
const state = reactive({
  email: '',
  name: '',
  img: ''
})

onMounted(() => { init() })

// 数据初始化
const init = async () => {
  const res = await GetUser().catch(err => {
    if (err.code === 'ECONNABORTED' || err.code === 'ERR_NETWORK') timeFlag.value = true
  })

  try {
    if (res?.status === 200) {
      state.img = res.data.avatar_url
      state.name = res.data.name
      state.email = res.data.email
    }
  } catch (error) {
    console.log(error)
  }
}

// 用户退出
const userLogout = async () => {
  const res = await UserLogout().catch(err => {
    if (err.code === 'ECONNABORTED' || err.code === 'ERR_NETWORK') {
      showToast({ type: 'fail', duration: 1500, forbidClick: true, message: '网络异常, 请稍后再试' })
    }
  })

  try {
    if (res?.status === 204) {
      showToast({
        type: 'success',
        message: '退出成功',
        duration: 1500,
        forbidClick: true,
        onClose: () => {
          saveToken('')
          router.push('/home')
        }
      })
    }
  } catch (error) {
    console.log(error)
  }
}

</script>
<script lang="ts">
export default {
  name: 'mineView'
}
</script>

<style lang="scss" scoped>
.content{
    width: 94%;
    margin: 0 3%;
    background: linear-gradient(90deg, #31c7A7, #A1c7c7);
    height: 110px;
    border-radius: 5px;
    margin-top: 65px;
    display: flex;
    align-items: center;
  .contentLeft{
    width: 70px;
    flex: 0 0 70px;
    margin-left: 4%;
    img{
      width: 100%;
    }
  }
  .contentRight{
    flex: 1;
    font-size: 12px;
    margin-left: 10px;
    p{
      margin-bottom: 8px;
    }
  }
}

.btn{
  width: 96%;
  margin: 50px 3% 0;

}
</style>
